<template>
  <div class="body-Container">
    <!--头像-->
    <div class="head">
      <div class="img">
        <img src="../../assets/images/photo.jpg" />
      </div>
      <p>用户登录</p>
    </div>
    <!--登陆-->
    <div class="loginForm">
      <div class="item">
        <input type="text" name="name" maxlength="11" placeholder="请输入您的帐号" autocomplete="off" class="name" />
      </div>
      <div class="item">
        <input type="text" name="vcode" maxlength="6" placeholder="请输入验证码" autocomplete="off" class="vcode" />
        <span id="vcode">发送验证码</span>
      </div>
      <div class="item" style="display:none">
        <input type="password" name="password" placeholder="请再次输入您的密码" autocomplete="off" class="password" />
      </div>
      <p style="display:none">忘记密码</p>
      <div class="submit"><button>登&nbsp;陆</button></div>
    </div>
    <!--第三方登陆-->
    <div class="other-login">
      <p><span>使用第三方帐号登陆</span></p>
      <div class="third">
        <ul>
          <li><img src="../../assets/iconImages/icon-qq.png" /></li>
          <li><a href="#" @click="_WeiXinOAuth"><img src="../../assets/iconImages/icon-weixin.png" /></a></li>
          <li><img src="../../assets/iconImages/icon-weibo.png" /></li>
        </ul>
      </div>
    </div>
    <!--尾部-->
    <div class="footer">
      <img src="../../assets/logo.png" />
      <p>登录使用就表示同意用户协议<a href="javascript:;">条款</a>和<a href="javascript:;">隐私</a>政策</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      wxAppid: 'wxfc11a4ccc9d3d821',
      wxOAuthUrl: ''
    }
  },
  methods: {
    _WeiXinOAuth() {
      this.$router.push('/oauth/wechat')
    }
  }
}
</script>

<style>
.body-Container{width: 100%; height: 100%; overflow-x: hidden; background-color: #FFFFFF; background: url(../../assets/images/top_bg.png) top left no-repeat;background-size: 100%;}
/*头像*/
.head .img{width: 1.8rem;height: 1.8rem;background: #FFFFFF;border-radius: 50%;margin: 0 auto;margin-top: 1.7rem;text-align: center;overflow: hidden;}
.head img{width: 1.8rem;}
.head p{text-align: center;color: #FFFFFF;font-size: .24rem;padding-top: .15rem;}
/*登陆表单*/
.loginForm {width: 100%;height: auto;overflow: hidden;padding: 1.85rem .45rem .45rem .45rem;}
.loginForm .item{display: flex;align-items: center;height: .85rem;margin-bottom: .45rem;font-size: .40rem;color: #333333;}
.loginForm .item input{width: 100%;height: 100%; display: inline-block;border: .01rem solid #ebebeb;box-shadow: 0px 0px 10px rgba(200,200,200,.1); padding-left: .8rem;outline: none;}
.loginForm .item input.name{background: url(../../assets/images/icon-phone.png) left .3rem center no-repeat;background-size: .23rem .35rem;}
.loginForm .item input.vcode{background: url(../../assets/images/icon-verify.png) left .3rem center no-repeat;background-size: .33rem .33rem;}
.loginForm .item input.password{background: url(../../assets/images/icon-lock.png) left .3rem center no-repeat;background-size: .22rem .32rem;}
.loginForm .item span{flex-shrink: 0;display: inline-block;width: 1.6rem;height: 100%;line-height: .85rem;background: #1f6ecf;font-size: .24rem;color: #fff;text-align: center;}
.loginForm .item span.disabled{background: #808080;}
.loginForm p{text-align: center;color: #333333;font-size: .24rem;padding-top: .2rem;}
.loginForm .submit{padding: 1rem .2rem;}
.loginForm .submit button{height: 1.05rem;line-height: 1.05rem;text-align: center;font-size: .34rem;color: #FFFFFF;border-radius: .15rem;outline: none;box-shadow: 0 .15rem .15rem rgba(31,110,207,.2);display: inline-block;width: 100%;background: #1f6ecf;}
/*第三方登陆*/
.other-login { margin-top: 2.2rem;}
.other-login p{text-align: center;position: relative;display: flex;align-items: center;justify-content: center;width: 3.7rem;margin: 0 auto;}
.other-login p:after{content: "";height: .01rem;width: 100%;background: #808080;top: 50%;transform: translateY(-50%);position: absolute;}
.other-login p span{display: inline-block;padding: .1rem .3rem;background: #FFFFFF;color: #808080;font-size: .22rem;z-index: 2;}
.other-login .third { padding: 0.4rem;}
.other-login .third ul{display: flex;align-items: center;justify-content: center;}
.other-login .third ul li img{width: .66rem;height: .66rem;margin: 0 .25rem;}
/*尾部*/
.footer{text-align: center;padding-top: .3rem;}
.footer img{display: inline-block;width: 1.07rem;height: .35rem;}
.footer p{font-size: .20rem;color: #666666;text-align: center;padding: .1rem 0 .4rem 0;letter-spacing: .01rem;}
.footer p a{color: #078dda;}

</style>
